<template>

  <div class="production-container">
    工区管理
    <!-- <div class="search-conter">
      <el-form ref="ruleForm" :model="ruleForm" :inline="true" label-width="88px">
        <el-row type="flex" class="row-bg" justify="space-between">
          <el-col>
            <el-form-item label="工区" prop="locoType">
              <el-select v-model="ruleForm.locoType" placeholder="请选择工区" style="width: 11em">
                <el-option
                  v-for="(item,index) in locoTypeData"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="工具类型" prop="repairing">
              <el-select v-model="ruleForm.repairing" placeholder="请选择工具类型" style="width: 11em">
                <el-option
                  v-for="(item,index) in repairingData"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="工具名称" prop="repairing">
              <el-select v-model="ruleForm.repairing" placeholder="请选择工具名称" style="width: 11em">
                <el-option
                  v-for="(item,index) in repairingData"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
              <el-button type="primary" @click="exportIn">导入</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table
      id="detail"
      height="540"
      :header-cell-style="{ background: '#F5F7FA'}"
      :data="tableData"
      border
    >
      <el-table-column type="index" align="center" />
      <el-table-column prop="" label="工区" align="center" />
      <el-table-column prop="" label="工具名称" align="center" />
      <el-table-column prop="" label="工具类型" align="center" />
      <el-table-column prop="" label="资产编号" align="center" />
    </el-table>
    <pagination
      v-show="total > 0"
      style="padding: 0"
      :total="total"
      :page-sizes="[15, 20, 50]"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog title="数据导入" :visible.sync="dialogVisible" @close="closeDocDialog">
      <el-form ref="form" :model="forms">
        <el-form-item label="数据:" prop="path" label-width="120px">
          <el-upload
            ref="upload"
            action=""
            :http-request="upLoad"
            :on-preview="handlePreview"
            :before-upload="beforeUpload"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-change="handleChange"
            :limit="1"
            :on-exceed="handleExceed"
            :auto-upload="false"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">添加文件</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传excel,文件不能超过过10MB
              <el-link style="color: #0000FF;" @click="downloadTemplate()">模板下载</el-link>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="uploadSubmit">确 定</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>
<script>
// import api from '@/api/production/locomotivePlan'
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      date: [],
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        beginDate: '',
        endDate: '',
        locoNum: '',
        locoType: '',
        repairing: '',
        unitName: this.jwdsection
      },
      dialogVisible: false,
      ruleForm: {
        locoNum: '',
        locoType: '',
        repairing: '',
        unitName: this.jwdsection
      },
      fileList: [],
      forms: {},
      locoTypeData: [],
      repairingData: []
    }
  },
  created() {
    // this.handleQuery()
  },
  methods: {
    getList() {
      // 查询列表
      api.selectBigPlanList(this.queryParams).then((res) => {
        if (res.rows) {
          this.tableData = res.rows
          this.total = res.total
        }
      })
      // 查询车型
      api.selectLocoType().then((res) => {
        this.locoTypeData = res.data.map(item => {
          return {
            value: item,
            label: item
          }
        })
      })
      // 查询修程
      api.selectRepairType().then(res => {
        this.repairingData = res.data.map(item => {
          return {
            value: item,
            label: item
          }
        })
      })
    },
    handleQuery() {
      this.queryParams.beginDate = this.date[0]
      this.queryParams.endDate = this.date[1]
      Object.assign(this.queryParams, this.ruleForm)
      this.getList()// 详情列表
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs.ruleForm.resetFields()
      this.handleQuery()
    },
    exportIn() {
      this.dialogVisible = true
    },
    closeDocDialog() {
      this.dialogVisible = false
    },
    downloadTemplate() {
      const fileName = '检修计划模板下载'
      api.exportExcel().then((res) => {
        // console.log(res)
        // this.fileDownload(res, fileName)
        const blob = new Blob([res], { type: 'application/vnd.openxmlformats-  officedocument.spreadsheetml.sheet;charset=utf-8' }) // type这里表示xlsx类型
        const downloadElement = document.createElement('a')
        const href = window.URL.createObjectURL(blob) // 创建下载的链接
        downloadElement.href = href
        downloadElement.download = fileName + '.xlsx' // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放掉blob对象
      })
        .catch((err) => {
          console.log(err)
          this.$message({
            message: '下载失败！',
            type: 'error',
            showClose: true
          })
        })
    },
    handleRemove(file, fileList) {
      if (fileList.length === 0) {
        this.forms.path = null
      }
    },
    handlePreview(file) {
    },
    handleExceed(files, fileList) {
      /* this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      ) */
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    uploadSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.$refs.upload.submit()
        }
      })
    },
    beforeUpload(file) {
      if (file) {
        this.uploadForm = new FormData()
        this.uploadForm.append('file', file)
      }
    },
    handleChange(file, fileList) {
      if (file) {
        const isExcel = 'application/vnd.ms-excel'
        const isLt10M = file.size > 1024 * 1024 * 10
        if (!isExcel) {
          this.$message.error('只能上传excel格式！')
        }
        if (isLt10M) {
          this.$message.error('文件大小不能超过10M!')
        }
      }
    },
    upLoad() {
      api.uploadExcel(this.uploadForm).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '上传成功!'
          })
          this.dialogVisible = false
          this.closeDocDialog()
          this.$refs.upload.clearFiles()
          this.getList()
        } else {
          this.$message({
            type: 'error',
            message: '上传失败!'
          })
        }
      })
    }
  }
}
</script>

<style>
.production-container{
    height: 88vh;
    background-color: #fff;
    margin-top: 10px;
}
</style>
